<template>
    <div id='system-icloud-show'>
       <!--  <h1 class="card-title">
           <p><span>iCloud信息</span></p>
       </h1> -->
        <div class="loading-min-height">
            <div class='detail-info'>
                <!-- 支持的设备型号 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>iCloud信息显示配置</span>
                        <span @click='show_modal_icloud = true' class="button auto transparent tar">配置iCloud信息显示配置</span>
                    </div>
                    <loading v-show='loading'></loading>
                    <p class='no-data' v-if='!loading && icloud === ""'>暂无数据</p>
                    <ul class="tag-list" v-if='!loading && icloud !== ""'>
                        <li class="tag__item">{{icloud | booleanToStr}}</li>
                    </ul>
                </div>
            </div>
        </div>

        <modal 
            title='配置iCloud信息显示配置'
            :show='show_modal_icloud' 
            :loading='loading_save' 
            confirm-text='保存'
            @close='show_modal_icloud = false'
            @confirm='saveIcloud'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">是否显示</span>
                        <div class="form-item__value">
                            <radio-group v-model='icloudSet'>
                                <radio :value='true'>显示</radio>
                                <radio :value='false'>隐藏</radio>
                            </radio-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>
    </div>
</template>

<script>    
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import datePicker from '../components/DatePicker.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import checkBox from '../components/CheckBox.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            radioGroup,
            radio,
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            checkBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '显示'
                }
                else{
                    return '隐藏'
                }
            }
        },
        data() {
            return {
                show_modal_icloud:false,
                placeholder:'--',
                icloud:'',
                icloudSet:'',
                loading:false,
                loading_save:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            saveIcloud(){
                this.loading_save = true
                systemApi.saveIcloudMsgShow({
                    icloudMsgShow:this.icloudSet,
                })
                .then(result=>{
                    this.show_modal_icloud = false
                    this.loading_save = false
                    this.getIcloud()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save = false
                })
            },
            getIcloud(){
                this.loading = true
                systemApi.showIcloudMsgShow()
                .then(result=>{
                    this.icloud = result
                    this.icloudSet = result
                    this.loading = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading = false
                })
            },
        },
        created(){
            this.getIcloud()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #system-icloud-show{

    }
</style>
